<template>
  <div class="settlement">
    <div class="settlement-content">
      <van-nav-bar
        title="填写订单"
        left-text="返回"
        left-arrow
        @click-left="back"
      />
      <van-contact-card
        type="edit"
        :name="currentContact.name"
        :tel="currentContact.tel"
        @click="onEdit"
        v-if="currentContact.name"
      />
      <van-contact-card type="add" @click="onAdd" v-else />
      <div class="card-title">
        <p>代发商品</p>
        <van-swipe-cell>
          <van-card
            v-for="item in settlement"
            :key="item.id"
            :num="item.quantity"
            :price="item.mallPrice + '.00'"
            :desc="item.slogan"
            :title="item.goodsName"
            class="goods-card"
            :thumb="item.goodsImg"
          />
        </van-swipe-cell>
        <div class="card-content">
          <p style="width: 50%">配送时间</p>
          <p style="text-align: right; width: 50%">1-3天内发货</p>
        </div>
      </div>
      <div class="card-title">
        <p>订单备注</p>
        <van-field
          v-model="message"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入订单备注"
        />
      </div>
    </div>
    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />
    <van-dialog
      v-model="show"
      title="支付"
      show-cancel-button
      closeOnClickOverlay
    >
      <van-tabbar v-model="active">
        <van-tabbar-item name="1">微信</van-tabbar-item>
        <van-tabbar-item name="2">支付宝</van-tabbar-item>
      </van-tabbar>
      <div class="payment">
        <div v-if="active == 1">
          <img src="../assets/wx.png" alt="" />
        </div>
        <div v-if="active == 2">
          <img src="../assets/zfb.png" alt="" />
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import { Notify, Dialog } from "vant";
import { saveOrUpdateOrderMore } from "../common/Api/index.js";
export default {
  data() {
    return {
      currentContact: {},
      message: "",
      show: false,
      active: "1",
      settlement: [],
      price: null,
      information: JSON.parse(sessionStorage.getItem("information")),
    };
  },
  mounted() {
    if (sessionStorage.getItem("currentContact")) {
      this.currentContact = JSON.parse(
        sessionStorage.getItem("currentContact")
      );
    } else {
      this.currentContact = {
        name: "",
        tel: "",
      };
    }
    this.settlement = JSON.parse(sessionStorage.getItem("purchase"));
    this.settlement.forEach((item) => {
      this.price += item.price * 100;
    });
  },
  methods: {
    back() {
      this.$router.push("/");
    },
    onEdit() {
      this.$router.push({ path: "/addressList", query: { key: 1 } });
      //   Toast("编辑");
    },
    onAdd() {
      this.$router.push({ path: "/addressList", query: { key: 1 } });
      //   "编辑";
    },
    onSubmit() {
      if (!JSON.parse(sessionStorage.getItem("currentContact"))) {
        Notify({ type: "danger", message: "请填写收货地址" });
        return;
      } else {
        this.show = true;
        let arr = setTimeout(() => {
          this.purchase();
        }, 3000);
        arr();
        clearInterval(arr);
      }
    },
    purchase() {
      console.log(this.currentContact, this.settlement);
      let arr = [];
      // mid: item.id,
      this.settlement.forEach((item) => {
        if (item.mId) {
          arr.push({
            userName: this.information.userName,
            uId: this.information.uId,
            address: this.currentContact.address, //地址
            name: item.goodsName, //商品名称
            quantity: item.quantity, //数量
            money: item.mallPrice, //金额
            phone: this.currentContact.tel, //手机号
            distinguish: "购买", //类别
            insideKey: item.slogan, //商品详情
            goodsImg: item.goodsImg, //图片
            detailed: this.information.addressDetail,
            mId: item.mId,
            oId: item.oId,
          });
        } else {
          arr.push({
            userName: this.information.userName,
            uId: this.information.uId,
            address: this.currentContact.address, //地址
            name: item.goodsName, //商品名称
            quantity: item.quantity, //数量
            money: item.mallPrice, //金额
            phone: this.currentContact.tel, //手机号
            distinguish: "购买", //类别
            insideKey: item.slogan, //商品详情
            goodsImg: item.goodsImg, //图片
            detailed: this.information.addressDetail,
            mId: item.id,
            oId: item.oId,
          });
        }
      });
      saveOrUpdateOrderMore({ arr: arr }).then((res) => {
        if (res == "操作成功") {
          Dialog.confirm({
            title: "下单成功",
            message: "是否去订单列表查看",
          })
            .then(() => {
              this.$router.push("/orderList");
            })
            .catch(() => {
              sessionStorage.setItem("active", JSON.stringify("home"));
              this.$router.push("/");
              // on cancel
            });
        }
      });
    },
  },
};
</script>
<style scoped  lang="scss">
.settlement {
  .settlement-content {
    width: 95%;
    margin: auto;
    .card-title {
      margin-top: 20px;
      background: #fff;
      margin-bottom: 55px;

      p {
        font-size: 16px;
        font-weight: 600;
      }
      .card-content {
        display: flex;
        p {
          font-weight: 500px;
          font-size: 12px;
        }
        margin-bottom: 10px;
      }
      .van-cell {
        padding: 15px 0;
      }
    }
  }
  .payment {
    // height: 400px;
  }
}
</style>